<%@ page trimDirectiveWhitespaces="true" language="java"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/mytag" prefix="yjd"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="author" content="m.yijiedai.com">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control"
	content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.roate {
				width: 140px;
				margin: 0 auto;
				padding-top: 120px;
			}
			
			.tips {
				font-size: 20px;
				text-align: center;
				line-height: 30px;
				margin-top: 30px;
			}
			
			.tips p {
				color: #ff9a00;
			}
			
			.spinner {
				margin: 100px auto;
				width: 60px;
				height: 60px;
				position: relative;
			}
			
			.container1 > div,
			.container2 > div,
			.container3 > div {
				width: 18px;
				height: 18px;
				background-color: #52c5fa;
				border-radius: 100%;
				position: absolute;
				-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
				animation: bouncedelay 1.2s infinite ease-in-out;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.spinner .spinner-container {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			
			.container2 {
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			
			.container3 {
				-webkit-transform: rotateZ(90deg);
				transform: rotateZ(90deg);
			}
			
			.circle1 {
				top: 0;
				left: 0;
			}
			
			.circle2 {
				top: 0;
				right: 0;
			}
			
			.circle3 {
				right: 0;
				bottom: 0;
			}
			
			.circle4 {
				left: 0;
				bottom: 0;
			}
			
			.container2 .circle1 {
				-webkit-animation-delay: -1.1s;
				animation-delay: -1.1s;
			}
			
			.container3 .circle1 {
				-webkit-animation-delay: -1.0s;
				animation-delay: -1.0s;
			}
			
			.container1 .circle2 {
				-webkit-animation-delay: -0.9s;
				animation-delay: -0.9s;
			}
			
			.container2 .circle2 {
				-webkit-animation-delay: -0.8s;
				animation-delay: -0.8s;
			}
			
			.container3 .circle2 {
				-webkit-animation-delay: -0.7s;
				animation-delay: -0.7s;
			}
			
			.container1 .circle3 {
				-webkit-animation-delay: -0.6s;
				animation-delay: -0.6s;
			}
			
			.container2 .circle3 {
				-webkit-animation-delay: -0.5s;
				animation-delay: -0.5s;
			}
			
			.container3 .circle3 {
				-webkit-animation-delay: -0.4s;
				animation-delay: -0.4s;
			}
			
			.container1 .circle4 {
				-webkit-animation-delay: -0.3s;
				animation-delay: -0.3s;
			}
			
			.container2 .circle4 {
				-webkit-animation-delay: -0.2s;
				animation-delay: -0.2s;
			}
			
			.container3 .circle4 {
				-webkit-animation-delay: -0.1s;
				animation-delay: -0.1s;
			}
			
			@-webkit-keyframes bouncedelay {
				0%,
				80%,
				100% {
					-webkit-transform: scale(0.0)
				}
				40% {
					-webkit-transform: scale(1.0)
				}
			}
			
			@keyframes bouncedelay {
				0%,
				80%,
				100% {
					transform: scale(0.0);
					-webkit-transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
					-webkit-transform: scale(1.0);
				}
			}
		</style>
</head>
<body>
	<div id="page">
		<div class="roate">
			<div class="spinner">
				<div class="spinner-container container1">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
				<div class="spinner-container container2">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
				<div class="spinner-container container3">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
			</div>
		</div>
		<div class="tips">
			第三方支付平台
			<p>正在跳转......</p>
		</div>
	</div>
	<form action="${quickOrder.payUrl }" name="pay" id="pay" method="post">
		<input name="app_user" type="hidden" value="${quickOrder.appUser }" />
		<input name="app_type" type="hidden" value="${quickOrder.appType }" />
		<input name="app_msg" type="hidden" value="${quickOrder.appMsg }" />
		<%-- <input type="submit" value="正在为您跳转网银..." class="ui-btn"> --%>
	</form>
	<script>
		document.forms['pay'].submit();
	</script>
</body>
</html>